<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id='app'>
        {{ title }}
        <father :name="title"></father>
    </div>
</body>
<script>
    /*
        所谓的依赖注入：可以理解为祖先传值，祖先组件可以给后代组件传值
        在祖先组件中通过 provide 将值发射出去，在后代组件通过 inject 接收

    */

    const son = {
        template: `<div class='son'>
                孙子组件 -- {{name}} -- {{ message }}
            </div>`,
        props: ['name'],
        // 将值注入到组件中
        inject: ['message']
    }

    const father = {
        template: `<div class='box'>
                父组件 -- {{ name }} -- {{ message }}
                <son :name='name'></son>
            </div>`,
        components: {
            son
        },
        // 将值注入到组件中
        inject: ['message'],
        props: ['name']
    }



    const app = Vue.createApp({
        data () {
            return {
                title: '张一',
                msg: '传家宝'
            }
        },
        // 依赖 提供
        provide () {
            return {
                message: this.msg
            }
        },
        // provide: {
        //     message: 'hello!'
        // }
        components: {
            father
        }
    })
    app.mount('#app')
</script>

</html>